/* eslint-disable @typescript-eslint/ban-ts-comment */
import { createPage } from '@mpxjs/core'
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore 图片
import transparentPic from '../../assets/snap/透明层.png'
// @ts-ignore 图片
import logoPic from '../../assets/ar/logo.png'
import { saveFile, shareFile } from '../../utils'

createPage({
  data: {
    width: 375,
    height: 504,
    renderWidth: 375,
    renderHeight: 504,
    isTake: false,
    isSave: false,
    resetShow: false,
    canvasWidth: 0,
    canvasHeight: 0,
    isShowMask: true
  },
  onLoad() {
    const info = wx.getWindowInfo()
    const width = info.windowWidth
    const height = info.windowHeight
    const dpi = info.pixelRatio
    console.log(height, height - 210)
    this.setData({
      width,
      height,
      renderWidth: width * dpi,
      renderHeight: height * dpi,
      canvasHeight: height - 210,
      canvasWidth: (width * (height - 210)) / height
    })
    wx.setKeepScreenOn({
      keepScreenOn: true
    })
    setTimeout(() => {
      const query = wx.createSelectorQuery()
      query
        .select('#canvas')
        .fields({ node: true, size: true })
        .exec((res) => {
          this.canvas = res[0].node
          this.ctx = this.canvas.getContext('2d')
          const dpr = wx.getWindowInfo().pixelRatio
          this.canvas.width = res[0].width * dpr
          this.canvas.height = res[0].height * dpr
        })
    }, 0)
  },
  methods: {
    async takePhoto() {
      const xrFrame = this.selectComponent('#main-frame')
      const path = await xrFrame.onShare()
      //   this.createPhoto(path)
      const photo = this.canvas.createImage()
      photo.src = path
      const dpr = wx.getWindowInfo().pixelRatio
      photo.onload = () => {
        const info = wx.getWindowInfo()
        const width = info.windowWidth
        const height = info.windowHeight
        console.log(height, height - 210, this.canvasHeight)
        const ctx = this.ctx
        const scale = this.canvas.width / photo.width
        // 计算图片绘制的尺寸和位置
        const imgWidth = photo.width * scale
        const imgHeight = photo.height * scale
        ctx.drawImage(photo, 0, 0, imgWidth, imgHeight)
        const transparentLayer = this.canvas.createImage()
        transparentLayer.src = transparentPic
        transparentLayer.onload = () => {
          const scale = Math.min(
            this.canvas.width / transparentLayer.width,
            this.canvas.height / transparentLayer.height
          )
          // 计算图片绘制的尺寸和位置
          const imgWidth = transparentLayer.width * scale
          const imgHeight = transparentLayer.height * scale
          ctx.drawImage(
            transparentLayer,
            0,
            0,
            transparentLayer.width,
            transparentLayer.height,
            0,
            this.canvas.height - imgHeight,
            imgWidth,
            imgHeight
          )
          const logo = this.canvas.createImage()
          logo.src = logoPic
          logo.onload = () => {
            const logoWidth = logo.width
            const logoHeight = logo.height
            ctx.drawImage(
              logo,
              0,
              0,
              logoWidth,
              logoHeight,
              this.canvas.width - logoWidth - 16 * dpr,
              16 * dpr,
              logoWidth,
              logoHeight
            )
          }
          this.setData({
            isTake: true,
            isSave: false
          })
        }
      }
    },
    onSave() {
      const imgSrc = this.canvas.toDataURL()
      saveFile(imgSrc)
      this.setData({
        isTake: false
      })
    },
    onShare() {
      const imgSrc = this.canvas.toDataURL()
      shareFile(imgSrc)
    },
    onReset() {
      if (this.isSave) {
        this.setData({
          isTake: false
        })
      } else {
        this.setData({
          resetShow: true
        })
      }
    },
    onResetSave() {
      this.setData({
        resetShow: false
      })
      this.onSave()
    },
    onResetCancel() {
      this.setData({
        resetShow: false,
        isTake: false
      })
    },
    onCloseMask() {
      this.setData({
        isShowMask: false
      })
    }
  }
})
